<template>
  <!-- 组委会信息 -->
  <el-form ref="formRef" label-width="150px" :model="form" :rules="rules">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="主办单位" prop="ocOrganizer">
          <el-input
            v-model="form.ocOrganizer"
            placeholder="多个单位之间用,隔开"
        /></el-form-item>
        <el-form-item label="承办单位" prop="ocDeptName">
          <el-input v-model="form.ocDeptName" placeholder="多个单位之间用,隔开"
        /></el-form-item>
        <el-form-item label="支持单位" prop="ocSupportor">
          <el-input
            v-model="form.ocSupportor"
            placeholder="多个单位之间用,隔开"
        /></el-form-item>
        <el-form-item label="协办单位" prop="ocToDeptName">
          <el-input
            v-model="form.ocToDeptName"
            placeholder="多个单位之间用,隔开"
        /></el-form-item>
        <el-form-item label="运营单位" prop="operatingUnit ">
          <el-input
            v-model="form.operatingUnit "
            placeholder="多个单位之间用,隔开"
        /></el-form-item>
        <el-form-item label="组委会联系电话" prop="ocTelno">
          <el-input v-model="form.ocTelno" placeholder="多个电话之间用,隔开"
        /></el-form-item>
      </el-col>
    </el-row>
    <el-row justify="center">
      <el-button type="primary" @click="lastStep(id)">上一步</el-button>
      <el-button type="primary" @click="submitForm">保存</el-button>
      <el-button type="primary" @click="nextStep(id)">下一步</el-button>
    </el-row>
  </el-form>
</template>

<script setup>
import { reactive } from "vue";
import { useRoute } from "vue-router";
import { getCurrentInstance } from "@vue/runtime-core";
import { editCommittee, editApi } from "@/api/match/league.js";
const router = useRoute();
const emit = defineEmits(["nextStep"]);
const id = ref();
const props = defineProps({
  id: {
    type: String,
    default: "",
  },
  leagueId: {
    type: String,
    default: undefined,
  },
});
const flag = ref(false);

const { proxy } = getCurrentInstance();

const data = reactive({
  rules: {
    // ocDeptName: {
    //   required: true,
    //   message: "请输入承办单位名称",
    //   trigger: "blur",
    // },
    // ocOrganizer: {
    //   required: true,
    //   message: "请输入主半单位名称",
    //   trigger: "blur",
    // },
    // ocSupportor: {
    //   required: true,
    //   message: "请输入协办单位名称",
    //   trigger: "blur",
    // },
    // ocTelno: {
    //   required: true,
    //   message: "请输入手机号",
    //   trigger: "blur",
    // },
    // ocToDeptName: {
    //   required: true,
    //   message: "请输入场馆名称",
    //   trigger: "blur",
    // },
  },
  form: {},
});
const { rules, form } = toRefs(data);

// 数据回显
if (props.id) {
  initData();
}
async function initData() {
  form.value.id = props.id;
  let res = await editApi(form.value);
  form.value = res.data;
}

// 保存
function submitForm() {
  // if (flag.value) return;
  return new Promise((resolve, reject) => {
    proxy.$refs["formRef"].validate(async (valid) => {
      if (valid) {
        form.value.id = props.id;
        let res = await editCommittee(form.value);
        id.value = res.data;
        if (res.code == 200) {
          flag.value = true;
          proxy.$modal.msgSuccess("保存成功");
        } else {
          proxy.$modal.msgError("保存失败");
        }
      } else {
        proxy.$modal.msgError("请完善信息");
      }
      if (flag.value) {
        resolve("成功");
      } else {
        reject("失败");
      }
    });
  });
}

// 下一步
async function nextStep() {
  if (flag.value) {
    emit("nextStep", 2, id.value);
  } else {
    await submitForm();
    if (flag.value) emit("nextStep", 2, id.value);
  }
}

// 上一步
async function lastStep() {
  if (flag.value) {
    emit("nextStep", 0, id.value);
  } else {
    await submitForm();
    if (flag.value) emit("nextStep", 0, id.value);
  }
}
</script>

<style scoped>
.tdFlex {
  display: flex;
}

.w50 {
  width: 50%;
}

.ml20 {
  margin-left: 20px;
}
</style>
